<template>
	<view class="container">
		<!-- 顶部欢迎栏：根据登录状态显示“登录”按钮或用户名 -->
		<view class="top-bar">
			<image class="avatar" src="/static/logo.png" mode="aspectFill"></image>
			<view class="top-text">
				<view>
					<text class="welcome">HI~欢迎回来</text>
					<!-- 登录状态判断：未登录显示“登录”按钮，已登录显示用户名 -->
					<view v-if="!isLogin">
						<navigator url="/pages/Login/Login">
							<button class="login-btn">登录</button>
						</navigator>
					</view>
					<view v-else class="username">{{ username }}</view>
				</view>
			</view>
		</view>

		<!-- 关注/话题栏 -->
		<view class="tab-bar">
			<text class="tab-item">关注</text>
			<text class="tab-split">|</text>
			<text class="tab-item">话题</text>
		</view>

		<!-- 功能按钮区 -->
		<view class="func-btns">
			<view class="func-item">
				<image class="func-icon" src="/static/关注-未关注.png" mode="aspectFit"></image>
				<text class="func-text">收藏</text>
			</view>
			<view class="func-item">
				<image class="func-icon" src="/static/历史.png" mode="aspectFit"></image>
				<text class="func-text">历史</text>
			</view>
			<view class="func-item">
				<image class="func-icon" src="/static/设置.png" mode="aspectFit"></image>
				<text class="func-text">设置</text>
			</view>
		</view>

		<!-- 红包广告栏 -->
		<view class="ad-bar">
			<image class="ad-icon" src="/static/guafen.png" mode="aspectFill"></image>
		</view>

		<!-- 内容区：修改为多图标+文字的布局 -->
		<view class="content">
			<!-- 多图标组合（替换原有的icon-group） -->
			<view class="icon-group">
				<!-- 小图标1：视频 -->
				<image class="small-icon" src="/static/beijin1.png" mode="aspectFit"></image>
			</view>
			<!-- 文字区 -->
			<text class="content-text">已有385,893人</text>
			<text class="content-subtext">在这里发布身边的新鲜事</text>
			<button class="publish-btn">我也要发布</button>
			<text class="browse-text">先去逛逛 ></text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false, // 登录状态
				username: '' // 登录后的用户名
			}
		},
		onShow() {
			// 页面显示时，检查登录状态（从缓存读取）
			this.checkLoginStatus();
		},
		methods: {
			// 检查登录状态（从uni-app缓存读取）
			checkLoginStatus() {
				const userInfo = uni.getStorageSync('userInfo');
				if (userInfo && userInfo.username) {
					this.isLogin = true;
					this.username = userInfo.username;
					// 更新TabBar的“我的”文字（未登录时是“未登录”，登录后是“我的”）
					uni.setTabBarItem({
						index: 3, // TabBar的第4项（索引从0开始）
						text: '我的'
					});
					// 隐藏TabBar的红点（如果有）
					uni.hideTabBarRedDot({
						index: 3
					});
				} else {
					this.isLogin = false;
					this.username = '';
					// 未登录时，TabBar显示“未登录”
					uni.setTabBarItem({
						index: 3,
						text: '未登录'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	/* 顶部欢迎栏 */
	.top-bar {
		display: flex;
		align-items: center;
		padding: 15px;
		background: linear-gradient(to right, #ff8a65, #ff7043);
		color: #fff;
	}

	/* 头像样式优化：圆形、边框、适配尺寸 */
	.avatar {
		width: 100rpx; /* 统一用rpx适配多端 */
		height: 100rpx;
		border-radius: 100rpx; /* 圆形头像 */
		margin-right: 15rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.8); /* 白色边框增强层次感 */
		overflow: hidden; /* 防止图片溢出圆形 */
	}

	.top-text {
		display: flex;
		flex-direction: column;
	}

	.welcome {
		font-size: 16px;
		margin-bottom: 5px;
		color: black;
	}

	.login-btn {
		background-color: #e65100;
		color: white;
		border: none;
		width: 190rpx;
		margin-top: 5rpx;
		padding: 0px 10px;
		border-radius: 12px;
		font-size: 12px;
	}

	/* 关注/话题栏 */
	.tab-bar {
		display: flex;
		justify-content: center;
		padding: 10px 0;
		font-size: 14px;
		color: #666;
		background: linear-gradient(to right, #ff8a65, #ff7043);
	}

	.tab-item {
		margin: 0 75px;
	}

	.tab-split {
		color: #ccc;
	}

	/* 功能按钮区 */
	.func-btns {
		display: flex;
		justify-content: space-around;
		padding: 15px 0;
		border-bottom: 1px solid #eee;
	}

	.func-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 功能图标样式优化：统一尺寸、圆角、hover效果 */
	.func-icon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 8rpx;
		border-radius: 8rpx; /* 轻微圆角，更柔和 */
		padding: 4rpx;
		transition: all 0.2s ease; /* 过渡动画 */
	}

	/* 功能图标hover效果（点击反馈） */
	.func-item:active .func-icon {
		transform: scale(0.9); /* 点击缩小 */
		background-color: rgba(255, 138, 101, 0.1); /* 浅色背景反馈 */
	}

	.func-text {
		font-size: 12px;
		color: #666;
	}

	/* 红包广告栏 */
	.ad-bar {
		display: flex;
		align-items: center;
		padding: 8px 5px;
		background-color: #fffbeb;
		border: 1px solid #ffe0b2;
		margin: 15rpx;
		border-radius: 12rpx; /* 更大圆角，更美观 */
		overflow: hidden; /* 防止图片溢出 */
	}

	/* 广告图样式优化：自适应、无拉伸 */
	.ad-icon {
		width: 700rpx;
		height: 100rpx; /* 自适应高度，防止拉伸 */
		border-radius: 8rpx; /* 轻微圆角 */
	}

	/* 内容区 */
	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}

	/* 多图标组合样式（替换原有的icon-group） */
	.icon-group {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 20rpx; /* 图标之间的间距 */
		margin-bottom: 30rpx;
		position: relative;
	}

	/* 主要小图标（视频、图片、链接） */
	.small-icon {
		width: 800rpx;
		height: 380rpx;
		border-radius: 16rpx; /* 圆角，和示例一致 */
	}

	/* 装饰用的小人图标（左右分布） */
	.decorate-icon {
		width: 40rpx;
		height: 40rpx;
		opacity: 0.6; /* 透明度降低，作为装饰 */
		position: absolute;
	}
	/* 左边的小人 */
	.decorate-icon:nth-child(4) {
		left: 100rpx;
		top: 20rpx;
	}
	/* 右边的小人 */
	.decorate-icon:nth-child(5) {
		right: 100rpx;
		top: 20rpx;
	}

	.content-text {
		font-size: 18px; /* 放大文字，和示例一致 */
		color: #333;
		margin-bottom: 5px;
	}

	.content-subtext {
		font-size: 14px;
		color: #999;
		margin-bottom: 20px;
	}

	.publish-btn {
	    color: #ff4081;
	    border: 1px solid #ff4081; 
	    padding: 3px 20px;
	    border-radius: 50px; 
	    font-size: 14px;
	    margin-bottom: 10px;
	    background: transparent; 
	}

	.browse-text {
		font-size: 14px;
		color: #666;
	}

	/* 用户名样式 */
	.username {
		font-size: 14px;
		color: #000;
		margin-top: 5rpx;
	}
</style>